{% extends "catalog/base_generic.html" %}

{% block title %}<title>图书馆首页</title>{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h1>图书馆</h1>
        </div>
        <div class="card-body">
            <p>帅哥美女们，欢迎来到<strong>小刘的图书馆</strong>，这是一个花费许多精力，用心制作的图书馆系统。如有问题，请多多包涵！谢谢老师，辛苦了！</p>

            <h2>馆藏概览</h2>
            <table class="table">
                <tr>
                    <th>书籍:</th>
                    <td>{{ num_books }}</td>
                </tr>
                <tr>
                    <th>图书副本:</th>
                    <td>{{ num_instances }}</td>
                </tr>
                <tr>
                    <th>可借阅副本:</th>
                    <td>{{ num_instances_available }}</td>
                </tr>
                <tr>
                    <th>作者:</th>
                    <td>{{ num_authors }}</td>
                </tr>
                <tr>
                    <th>书籍流派:</th>
                    <td>{{ num_genres }}</td>  <!-- 文档挑战内容 -->
                </tr>
            </table>

            <p class="num-visits">您已访问本页面 {{ num_visits }}{% if num_visits == 1 %} 次{% else %} 次{% endif %}。</p>

            <!-- 文档挑战：最近书籍列表 -->
            <h2>最近添加的书籍</h2>
            <ul>
                {% for book in recent_books %}
                    <li>
                        <!-- 必须传递书籍的主键 pk -->
                        <a href="{% url 'book-detail' book.pk %}">{{ book.title }}</a>
                    </li>
                {% endfor %}
            </ul>

            <!-- DeepSeek 输入框和结果显示区域 -->
            <h2>有什么问题，问问小刘同学吧！！！</h2>
            <input type="text" id="deepseek-input" placeholder="输入你的问题">
            <button id="deepseek-submit" class="btn btn-primary">提交</button>
            <div id="deepseek-result"></div>
        </div>
    </div>

    <script>
        const apiKey = 'sk-03a0e96fdf834dee997b65e4af92ce5d';
        const apiUrl = 'https://api.deepseek.com/v1/chat/completions';

        document.getElementById('deepseek-submit').addEventListener('click', async () => {
            const input = document.getElementById('deepseek-input').value;
            const resultDiv = document.getElementById('deepseek-result');
            resultDiv.innerHTML = '';

            try {
                const response = await fetch(apiUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: 'deepseek-chat',
                        messages: [
                            {
                                "role": "user",
                                "content": `${input}`
                            }
                        ],
                        max_tokens: 300,
                        temperature: 0.8
                    })
                });

                const data = await response.json();
                const answer = data.choices[0].message.content;

                 const truncatedAnswer = answer.length > 300 ?
                     answer.substring(0, 300) + '...' : answer;

                let index = 0;
                const intervalId = setInterval(() => {
                    if (index < answer.length) {
                        resultDiv.innerHTML += answer[index];
                        index++;
                    } else {
                        clearInterval(intervalId);
                    }
                }, 80);
            } catch (error) {
                resultDiv.innerHTML = '请求出错，请稍后再试。';
            }
        });
    </script>
{% endblock %}